<template>
	<div class="memberGroup">
		<div class="head">
			<div class="title">
				<span>会员分群</span>
				<!-- <span class="tip">*数据每日更新一次，最后一次数据更新时间：2022-02-01 00:30</span> -->
			</div>
			<div>
				<el-button v-if="judgeOpen != 1" type="primary" style="margin: 10px;" @click="judgeOpenBtn">开通
				</el-button>
				<el-button v-else type="primary" @click="handleEdit">会员分群设置</el-button>
			</div>
		</div>

		<div v-if="judgeOpen == 1" class="lisBox">
			<div v-for="(item, index) in RfmData" :key="index" class="list">
				<div class="title">
					<span>{{ item.groupName }}</span>
					<span class="num">人群总数：{{ item.memberCount ? item.memberCount : 0 }}</span>
				</div>
				<div v-if="index == 0" class="txt">近{{ item.groupConfigs[0].conditionValue }}天有消费</div>
				<div v-if="index == 1" class="txt">近{{ item.groupConfigs[0].conditionValue }}天有消费；
					近{{ item.groupConfigs[1].conditionValue }}天无消费</div>
				<div v-if="index == 2" class="txt">
					近{{ item.groupConfigs[0].conditionValue }}天有消费；近{{ item.groupConfigs[1].conditionValue }}天无消费</div>
				<div v-if="index == 3" class="txt">非会员顾客</div>
				<div v-if="index == 4" class="txt">入会以来未完成消费</div>
				<div v-if="index == 5" class="txt">入会以来仅完成1次消费</div>
				<div v-if="index == 6" class="txt">
					近{{ item.groupConfigs[0].conditionValue }}天有加过购物车；近{{ item.groupConfigs[1].conditionValue }}天无消费
				</div>
				<div v-if="index == 7" class="txt">
					近{{ item.groupConfigs[0].conditionValue }}天有下过单；近{{ item.groupConfigs[1].conditionValue }}天无消费</div>
				<div v-if="index != 3" class="btnBox">
					<div class="toSet look" @click="toLookBtn(index,item.memberCount)"
						:class="{'noMemberCount':item.memberCount <= 0 }">
						查看会员</div>
					<div class="toSet" @click="toSetBtn(index)">去运营</div>
				</div>
				<div v-if="index == 3" class="toSet" :class="{disableClass: index == 3}">敬请期待！</div>
			</div>
			<div v-if="(RfmData.length % 2) == 0" class="list" style="border: none;" />
		</div>

		<RfmConfigDialog ref="RfmConfigDialog" @RfmForm="getRfmForm" />
	</div>
</template>

<script>
	import {
		selectMemberGroups,
		judgeOpenRfm
	} from '@/api/vip'
	import RfmConfigDialog from './RfmConfigDialog'
	import qs from 'qs'
	import {
		getToken
	} from '@/utils/auth'
	export default {
		components: {
			RfmConfigDialog
		},
		data() {
			return {
				RfmData: '',
				judgeOpen: null
			}
		},
		mounted() {
			this.judgeOpenRfmFun()
		},
		methods: {
			handleEdit() {
				this.$refs.RfmConfigDialog.edit()
			},

			/* 接收RFM配置 */
			judgeOpenRfmFun() {
				judgeOpenRfm().then(res => {
					this.judgeOpen = res.data
					if (this.judgeOpen == 1) {
						this.getMemberGroupsFun()
					}
				})
			},
			getRfmForm(e) {
				this.RfmData = e
				this.getMemberGroupsFun()
			},
			// 获取会员分群列表
			getMemberGroupsFun() {
				selectMemberGroups().then(res => {
					this.RfmData = res.data
				})
			},
			// 去运营
			toSetBtn(index) {
				this.$router.push({
					name: 'VipList',
					params: {
						groupId: this.RfmData[index].id
					}
				})
			},
			// 查看会员
			toLookBtn(index, memberCount) {
				if (memberCount <= 0) {
					this.$message({
						message: '暂无会员满足此分群条件',
						type: 'warning'
					});
					return
				}
				let groupId = this.RfmData[index].id
				window.open(encodeURI('#/vip/list?' +
					'groupId=' +
					groupId), '_blank')
			},
			judgeOpenBtn() {
				this.$router.push({
					name: 'PlugCenterList'
				})
			}
		}
	}
</script>

<style rel="stylesheet/scss" lang="scss">
	.memberGroup {
		width: 100%;
		padding: 20px 40px;
		box-sizing: border-box;
		background-color: white;

		.head {
			width: 100%;
			display: flex;
			justify-content: space-between;
			overflow: hidden;
			align-items: center;

			.title {
				font-size: 24px;

				span {
					float: left;
				}

				.tip {
					font-size: 14px;
					color: #ccc;
					margin-left: 20px;
					margin-top: 5px;
				}
			}
		}

		.lisBox {
			width: 100%;
			overflow: hidden;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			margin-top: 30px;

			.list {
				width: 30%;
				min-height: 213px;
				border: 1px solid $primary;
				border-radius: 8px;
				margin-bottom: 40px;
				overflow: hidden;
				position: relative;
				word-wrap: break-word;

				.title {
					width: 100%;
					display: flex;
					justify-content: space-between;
					padding: 16px;
					box-sizing: border-box;

					.num {
						font-size: 14px;
					}
				}

				.txt {
					font-size: 14px;
					margin: 26px 0;
					padding: 0 16px;
					box-sizing: border-box;
				}

				.btnBox {
					display: flex;
					justify-content: space-around;
					align-items: center;
					width: 100%;
					position: absolute;
					bottom: 0;

					.toSet {
						flex: 1;
						text-align: center;
						background-color: $primary;
						padding: 16px 0;
						color: white;
						cursor: pointer;
						border-top: 1px solid $primary;

						&:active {
							opacity: 0.5;
						}
					}

					.look {
						background: transparent;
						color: $primary;
						border-bottom: none;
						border-left: none;
					}

					.noMemberCount {
						opacity: 0.5;
						cursor: no-drop;
						background: $primary;
						color: white;
					}
				}
				.disableClass {
					opacity: 0.5;
					cursor: no-drop;
					text-align: center;
					background-color: $primary;
					padding: 16px 0;
					width: 100%;
					position: absolute;
					bottom: 0;
					color: white;
				}
			}
		}
	}
</style>
